<template>
	<view v-if="show">
		<Header title="充值" :showBack="true" ></Header>
		<view class="container">
			<view class="content">
				<view class="card">
					<input type="number" @blur="checkEnd"  :disabled="true" :focus="!check" v-model="info.ownerName" />
					<view @click="checkCard">
						<image src="../../static/img/tianjia.png" mode=""></image>
					</view>
				</view>
				<!--add-->
				<view class="box1" v-if="info.cardNo">
					<text>卡号&#12288;</text>
				</view>
				<view class="card1" v-if="info.cardNo">
					<!--<input type="number" @blur="checkEnd" @input="getNumber"  :disabled="check" :focus="!check" v-model="card" />-->
					<input type="number" @blur="checkEnd" :disabled="true" :focus="!check" v-model="info.cardNo" />
					<view @click="checkCard">
						<image src="../../static/img/tianjia.png" mode=""></image>
					</view>
				</view>
				
				<view  class="box">
					<text>充值金额 &#12288;{{list[isCheck].rechargeAmount}}元</text>
					<view v-if="list.length==9" class="box1" @click="checkPrice(index)" :class="{'active':index==isCheck}" v-for="(item,index) in list" :key="index">
						<view>{{item.rechargeAmount}}元</view>
						<!-- <view v-if="item.activityAmount">送{{item.activityAmount}}元</view> -->
					</view>
					<view v-if="list.length!=9" class="box2" @click="checkPrice(index)" :class="{'active':index==isCheck}" v-for="(item,index) in list" :key="index">
						充{{item.rechargeAmount}}元  <text v-if="item.activityAmount">送{{item.activityAmount}}元</text>
					</view>
					<button @click="summit" class="button" type="default">
						立即支付
					</button>
				</view>		
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				info:'',
				appId:getApp().globalData.appId,
				check:true,
				isCheck:4,
				list:[
					{
						rechargeAmount:10,
						activityAmount:''
					},
					{
						rechargeAmount:20,
						activityAmount:''
					},
					{
						rechargeAmount:30,
						activityAmount:''
					},
					{
						rechargeAmount:50,
						activityAmount:''
					},
					{
						rechargeAmount:100,
						activityAmount:''
					},
					{
						rechargeAmount:200,
						activityAmount:''
					},
					{
						rechargeAmount:300,
						activityAmount:''
					},
					{
						rechargeAmount:500,
						activityAmount:''
					},
					{
						rechargeAmount:1000,
						activityAmount:''
					}
				]
			}
		},
		onLoad() {
			this.info=uni.getStorageSync('info')
			this.getInfo()
		},
		methods: {
			getInfo(){
				this.$http('/minprogram/api/member/getRechargeActivityAmountNew?memberCardId='+this.info.id,{},res=>{
					// res.data.items.forEach((item,index)=>{
					// 	for(let i = 0;i<this.list.length;i++){
					// 		if(this.list[i].rechargeAmount==item.rechargeAmount){
					// 			this.list[i].activityAmount=item.activityAmount
					// 			break;
					// 		}
					// 	}
					// })
					if(res.data.items.length>0){
						this.isCheck = 0
						this.list = res.data.items
					}
					this.show = true
				},'GET')
			},
			checkCard(){
				this.check=false
			},
			checkEnd(){
				this.check=true
			},
			checkPrice(index){
				this.isCheck=index
			},
			summit(){
				
				let that=this
				uni.showModal({
				    // title: '提示',
				    // content: `充值金额${that.list[that.isCheck].rechargeAmount}，请确认选择正确，充值成功后，不做退款处理，请知悉！`,
					content: `充值金额${that.list[that.isCheck].rechargeAmount} 元，请确认充值`,
					showCancel:false,
				    success: function (res) {
				        that.$http('/minprogram/api/member/rechargeNew',{
				        	 "paymentType":1,
				        	 "payType":11,
				        	 "memberCardId":that.info.id,
				        	 "openId":uni.getStorageSync('openId'),
				        	 "rechargeAmount":that.list[that.isCheck].rechargeAmount,
									 "appId":that.appId
				        },res=>{
				        	that.$http('/pay/api/pay/pay',res.data,pay=>{
				        		uni.requestPayment({
				        		    provider: 'wxpay',
				        		    timeStamp: pay.data.timeStamp,
				        		    nonceStr: pay.data.nonceStr,
				        		    package: pay.data.package,
				        		    signType: pay.data.signType,
				        		    paySign: pay.data.paySign,
				        		    success: function (res1) {
				        		        	uni.showToast({
				        		        		icon:'none',
				        		        		title:'充值成功'
				        		        	})
				        		    },
				        		    fail: function (err) {
				        		    }
				        		});
				        	})
				        	
				        })
				    }
				});
				
				
				
			}
		}
	}
</script>

<style scoped lang="less">
	.content{
		// box-shadow: 0 0 15upx rgba(247, 200, 122, .2);
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		background: #fff;
		border-radius: 16upx;
	}
.card{
	width: 100%;
	height: 150upx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1upx solid #999999;
	>input{
		width: 80%;
		height: 100%;
		font-size: 60upx;
		line-height: 150upx;
		box-sizing: border-box;
		padding: 0 30upx;
	}
	>view{
		width: 20%;
		height: 100%;
		position: relative;
		>image{
			width: 60upx;
			height: 60upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
}
.card1{
	width: 100%;
	background-color: #FFFFFF;
	height: 150upx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1upx solid #999999;
	>input{
		width: 80%;
		height: 100%;
		font-size: 40upx;
		line-height: 150upx;
		box-sizing: border-box;
		padding: 0 30upx;
	}
	>view{
		width: 20%;
		height: 100%;
		position: relative;
		>image{
			width: 60upx;
			height: 60upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
	}
}
.box1{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 20upx 24upx 40upx;
	position: relative;
	>text{
		position: absolute;
		top: 0upx;
		font-size: 28upx;
		font-weight: 500;
		height: 100upx;
		line-height: 100upx;
	}
}
.box{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	box-sizing: border-box;
	padding: 100upx 24upx 40upx;
	position: relative;
	>text{
		position: absolute;
		top: 0upx;
		font-size: 28upx;
		font-weight: 500;
		height: 100upx;
		line-height: 100upx;
	}
	>view{
		width: 30%;
		border: 2upx solid #ffd399;
		text-align: center;
		color: #ffd399;
		border-radius: 10upx;
		height: 110upx;
		font-size: 34upx;
		margin-bottom: 22upx;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		
		
		// >view:first-child{
		// 	height: 60upx;
		// 	line-height: 70upx;
		// }
		// >view:nth-child(2){
		// 	height: 30upx;
		// 	font-size: 24upx;
		// 	line-height: 30upx;
		// 	width: 100%;
		// 	text-align: center;
		// }
	}
	>view.box2{
		width: 100%;
		height: 80upx;
		line-height: 80upx;
		display: block;
	}
	>view.active{
		background: #ffd399;
		color: #FFFFFF;
	}
}
.button{
	width: 100%;
	height: 80upx;
	background-color: #ff9200;
	margin-top: 40upx;
	color: #FFFFFF;
	font-size: 28upx;
	line-height: 80upx;
}
</style>
